import React from 'react';
import { connect } from 'dva';
import { Tabs } from 'antd';
import { ContentPackage } from '../../../comps';
import styles from './index.less';
// 页面引入组件
import TableList from './tableList';
import FormContent from './FormContent';
// 定义变量
const { TabPane } = Tabs;

class nonstandarmaintenanceNew extends React.Component {
  constructor() {
    super();
    this.state = {
      activeKey: '1', // 当前tab 1-资产 2-投资
      pageStatus: '1', // 当前展示页面 1-列表 2-表单
      pageType: '', // 表单页面的状态，如果是新增则是add  编辑是edit  查看是view
      formDatas: {
        baseInfo: {}, // 基本信息
        reportInfo: {}, // 监管报表信息
        files: [], // 资产包
        zgtzptNonstandarCashFlows: [], // 赎回计息
      },
      parentRefsWidth: 0, // 这个是需要传入给表单页面的宽度
    };
  }

  componentDidMount() {
    const {
      globalM: { dataDictionary = {} },
    } = this.props;
    this.props.dispatch({
      type: 'nonstandarmaintenanceNewM/fetchDictByKeys',
      payload: {
        dictData: dataDictionary,
      },
    });
    window.addEventListener('resize', this.windowChange);
  }

  // 点击切换tab
  handleChange = (e) => {
    this.setState({
      activeKey: e,
    });
  };

  // 点击列表中  查看 编辑 新增
  changePageStatus = (record, type) => {
    // 这边如果是查看编辑需要进行查询 详情操作，formdatas塞值
    this.setState({
      pageStatus: '2',
      pageType: type,
      formDatas: {
        ...record,
      },
    });
  };

  // 刷新页面上的列表
  saveReshList = (activeKeys) => {
    this.setState(
      {
        pageStatus: '1',
        activeKey: activeKeys,
      },
      () => {
        if (activeKeys == 1) {
          this.child1.getTableData();
        } else {
          this.child2.getTableData();
        }
      },
    );
  };

  render() {
    const { activeKey, pageStatus, formDatas, pageType, currentPage, numInPage, searchObj, isReset, randomTime } = this.state;

    return (
      <>
        {pageStatus == '2' ? (
          <div>
            <FormContent
              formDatas={formDatas}
              pageType={pageType}
              activeKey={activeKey}
              saveReshList={this.saveReshList}
              CancelFn={() =>
                this.setState({
                  pageStatus: '1',
                  activeKey: '1',
                })
              }
            />
          </div>
        ) : (
          <ContentPackage
            title='非标（非理财直融）维护'
            contentHtml={
              <div>
                {
                  <div style={{ display: pageStatus == '1' ? 'block' : 'none' }}>
                    <div className={styles.Wrap}>
                      {/* 主要内容 */}
                      <Tabs onChange={this.handleChange}>
                        <TabPane tab='非标准化债权类资产' key='1'>
                          <TableList activeKey={activeKey} onRef={(ref) => (this.child1 = ref)} changePageStatus={this.changePageStatus} />
                        </TabPane>
                        <TabPane tab='非标准化债权类投资' key='2'>
                          <TableList onRef={(ref) => (this.child2 = ref)} activeKey={activeKey} changePageStatus={this.changePageStatus} />
                        </TabPane>
                      </Tabs>
                    </div>
                  </div>
                }
              </div>
            }
          />
        )}
      </>
    );
  }
}
export default connect(({ nonstandarmaintenanceNewM, globalM }) => ({ nonstandarmaintenanceNewM, globalM }))(nonstandarmaintenanceNew);
